<template>
	<theme-box title="角色列表">
		<form class="form-inline" @submit.prevent v-el:searchform>
			<div class="form-group" left="3">
				<label>商户号：</label>
				<select name="mchtId" class="form-control" :search="true">
					<option value="" checked="checked">所有商户</option>
							<option v-for="mcht in mchtList" :value="mcht.value">
								{{mcht.key}}
							</option>
					</select>
			</div>
			<div class="form-group">
				<label>角色名称：</label>
				<input type="text" class="form-control" name="roleName">
			</div>
			<v-button theme="warning" class="pull-right" @click="reset">重置</v-button>
			<v-button theme="primary" class="pull-right" @click="search">查询</v-button>
		</form>
		<table class="table table-bordered table-striped" v-el:table>
		</table>
		<!-- 弹出层 -->
		<edit-modal :model="model" v-ref:modal></edit-modal>
	</theme-box>
</template>

<style scoped>
	.form-inline .btn+.btn {
		margin-right: 10px;
	}

	.form-inline .form-group+.form-group {
		margin-left: 20px;
	}
</style>

<script>
    //解决datatables弹窗警告
    $.fn.dataTable.ext.errMode = 'none';
	import Control from './list.control.vue';
	import Modal from './list.modal.vue';
	var serialize = require('form-serialize');

	let datatable;
	export default {
		components: {
			'edit-modal': Modal
		},
		data: () => ({
			dataSet: {
				data: [],
				recordsTotal: 0,
				recordsFiltered: 0
			},
			columnsSet: [],
			model: {},
			mchtList: []
		}),
		events: {
			'table-reload': function () {
					this.reset();
			}
		},
		methods: {
			 reset() {
					this.$els.searchform.reset();
					datatable.api().ajax.reload();
				},
				search() {
					datatable.api().ajax.reload();
				},
				getMcht(data) {
					let self = this;
					var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
					self.$post({
						url: "/api/v2" + projectName_Url + "/list/mcht/roleMaintain/"+ mchtId,
						method:"GET"
					}).then(response => {
						let list = response.content.info;
						self.$set("mchtList", list);
						self.mchtIdValue = list[0].value
					}, error => {});
				},
				setConfig() {
					//..加载配置
					let columnsSet = [{
						    title: "商户号",
						    data: "mchtId",
						    visible:false,
						    className: "operate",
						    render(data,type,row){
							    return row.mchtId
						 }
					  },{
							 title: "商户名称",
							 data: "mchtName",
							 edit: true,
							 className: "operate",
						},{
								title: "角色号",
								data: "roleId",
								className: "operate",
								edit: true,
						 },{
							  title: "角色名称",
							  data: "roleName",
							  edit: true,
							  className: "operate",
					   },{
						    title: "角色类型",
						    data: "roleType",
						    options:[{key:"系统操作员",value:"system"},{key:"商户管理员",value:"mchtmanager"},{key:"商户操作员",value:"mchtopr"}],
						    className: "operate",
								render: function(data) {
									var value;
									if(data == "system"){
										value = '系统操作员'
									}else if(data == "mchtmanager"){
										value = '商户管理员'
									}else{
										value = "商户操作员"
									}
									 return value;
								}
				     },{
								title: "描述",
								data: "roleDsc",
								edit: true,
								className: "operate",
                                className: "wrap"
						 },{
								title: "相关操作",
								name: "edit",
								className: "edit",
								data: null,
								defaultContent: ""
						}
					]
					this.$set("columnsSet", columnsSet)
				},
				loadData(data = {}) {
					//..加载数据
					let self = this;
					var _data = serialize(self.$els.searchform, {
							hash: true,
							disabled: true,
							empty: true
					});
                    _data.aoData = data;

					return new Promise(function (resolve, reject) {
                        var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
						self.$post({
							url: '/api/v1' + projectName_Url + '/plat/role/query/'+ mchtId,
							data:_data
						}).then(function (response) {
							if (response) {
								let data = response.content;
								self.dataSet.data = data.list;
								self.dataSet.recordsTotal = data.total;
								self.dataSet.recordsFiltered = data.total;
								return resolve();
							}
						}, function (response) {
							 return reject();
						});
					})

				}
		},
		created() {
			this.setConfig();
		},
		beforeCompile() {
			this.getMcht();
		},
		ready() {
			let self = this;

			datatable = $(this.$els.table).dataTable({
				"columns": self.columnsSet,
				"fnCreatedRow": function (row, data, index) {
					let dom = this.api().cell(row, 'edit:name').node();
					let editView = new Vue(Control);
					data.roleId = data.roleId;
					data.mchtId = data.mchtId;
				    editView.$set("model",data);

					editView.$on("edit", function () {
						self.model = _.cloneDeep(data);
						self.$refs.modal.init();
					});
					editView.$on("reload", function () {
						self.reset();
					});
					editView.$mount().$appendTo(dom);
				},
				"paging": true,
				"pagingType": "full_numbers",
				"lengthChange": false,
				"searching": false,
				"ordering": false,
				"info": true,
				"autoWidth": false,
				"serverSide": true,
				"processing": true,
				"ajax": async function (data, callback, settings) {
					let result = {};
					let _data = {};

                    var page = ([{
						"name": "iDisplayStart",
						"value": 1 + data.start / data.length
					}, {
						"name": "iDisplayLength",
						"value": data.length
					}]);
                    _data = JSON.stringify(page);
//					$(self.$els.searchform).find("input").each(function () {
//						$(this).val($.trim($(this).val()));
//					});

				  // _data.roleIdd = self.$els.searchid.value;
					// _data.roleName = self.$els.searchname.value;

					self.loadData(_data).then(function () {
						result = self.dataSet;
						if (!result.data) {
							result.data = [];
						}
						callback(result);
					}, function () {
						result.data = [];
						callback(result);
					})

				},
				"initComplete": function (settings, json) {
					//self.$refs.modal.$set('collection', self.getCollection());
				},
				"fnDrawCallback": function( settings ) {
					let count = Math.ceil(settings._iRecordsTotal/settings._iDisplayLength);
					if(count<=1) {
						  $('.dataTables_paginate').hide();
					} else {
						  $('.dataTables_paginate').show();
					}
				}

			});
		}
	}
</script>
